<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--人工客服-->
    <u-navbar
      title="人工客服"
      leftIcon=""
      leftIconColor="#000000"
      :placeholder="true"
      :autoBack="false"
    >
      <view slot="left" @click="goBack"
        ><u-icon name="arrow-left" size="36" color="#000000"></u-icon
      ></view>
      <view slot="right" @click="isShow = true"
        ><u-icon name="search" size="44" color="#000000"></u-icon
      ></view>
    </u-navbar>
    <!--状态类型-->
    <view class="mx-1">
      <u-tabs
        lineWidth="12"
        lineHeight="12"
        lineColor="#FF3D62"
        :activeStyle="{ color: '#333333' }"
        :inactiveStyle="{ color: '#999999' }"
        itemStyle="padding-left: 28rpx; padding-right:40rpx; height:88rpx;"
        :list="typeList"
        @click="typeTab"
      ></u-tabs>
    </view>
    <view class="border-b-grayLight mt-2"></view>
    <view v-if="status != 4">
      <view class="ml-4" v-if="infiniteList.length > 0">
        <view
          class="w-full border-b-grayLight py-4"
          v-for="(item, index) in infiniteList"
          :key="item.id"
        >
          <view class="mr-3">
            <view class="flex items-center">
              <view class="mr-2.5" v-if="item.status != 3">
                <image
                  class="w-3.5 h-3.5"
                  src="/static/icons/icon-unread.png"
                  v-if="item.status == 0 || item.status == 1"
                  @click="markStatus(item, 3)"
                />
                <image
                  class="w-3.5 h-3.5"
                  src="/static/icons/icon-unread.png"
                  v-if="item.status == 2"
                  @click="markStatus(item, 2)"
                />
              </view>
              <view class="mr-2.5" v-else>
                <image class="w-3.5 h-3.5" src="/static/icons/icon-read.png" />
              </view>
              <view
                class="text-sm text-dark w-4/5 truncate"
                @click="goDetail(item)"
                :class="item.status == 3 ? 'text-light' : ''"
                ><text class="text-primary" v-if="item.nedHandle"
                  >【需要我处理】</text
                >{{ item.content }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <b-empty v-else></b-empty>
    </view>
    <view v-if="status == 4">
      <view class="text-base text-center text-light leading-6 mt-5"
        >人工客服</view
      >
      <view class="text-base text-center text-light leading-6"
        >客服上班时间：{{ contact.time }}</view
      >
      <view class="text-base text-center text-light leading-6 mt-5">电话</view>
      <view class="text-base text-center text-light leading-6"
        >{{ contact.phone
        }}<text
          class="text-blue-400 text-sm ml-2.5"
          @click="phoneCall(contact.phone)"
          >拨打</text
        ></view
      >
      <view class="text-base text-center text-light leading-6 mt-5">QQ</view>
      <view class="flex justify-center"
        ><text class="text-base text-center text-light leading-6">{{
          contact.qq
        }}</text
        ><u-icon
          name="/static/icons/icon-copy-gray.png"
          size="36"
          class="ml-2"
          @click="toCopy(contact.qq)"
        ></u-icon
      ></view>
      <view class="text-base text-center text-light leading-6 mt-5">微信</view>
      <view class="my-2 flex justify-center">
        <u-album
          :urls="[contact.wx]"
          keyName="url"
          multipleSize="200rpx"
          shape="circle"
          rowCount="3"
          space="20"
          class="diy-album"
        ></u-album>
      </view>
      <view class="text-center text-primary text-xs mt-2"
        >点击放大图片截图保存查找</view
      >
    </view>
    <!--添加-->
    <view class="fixed z-10 right-6 bottom-8" @click="goTo('schedule-add')">
      <view
        class="bg-primary w-16 h-16 rounded-full common-box-shadow flex justify-center"
        ><u-icon name="plus" color="#FFFFFF" size="52rpx"></u-icon
      ></view>
    </view>
  </view>
</template>

<script>
import infinite from '@/mixins/infinite';
import {
  changeSchedule,
  getScheduleList,
  getContact,
} from '../../services/customer';

export default {
  mixins: [infinite],
  data() {
    return {
      isShow: true,
      status: 1, //0创建  1进行中  2待复核  3已完成
      typeList: [
        { name: '进行中', type: 1 },
        { name: '待复核', type: 2 },
        { name: '已完成', type: 3 },
        { name: '其他联系方式', type: 4 },
      ],
      infiniteList: [],
      contact: {
        time: '',
        wx: '',
        qq: '',
        phone: '',
      },
    };
  },
  async created() {
    this._getContact();
  },
  async onShow() {
    this.getInfiniteList();
  },
  methods: {
    //复制QQ号
    toCopy(content) {
      uni.setClipboardData({
        data: content,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'none',
          });
        },
      });
    },
    //拨打电话
    phoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log('拨打电话成功！');
        },
        fail: function () {
          console.log('拨打电话失败！');
        },
      });
    },
    //获取联系方式
    async _getContact() {
      const { code, data } = await getContact();
      if (code != 200) return;
      this.contact = data;
    },
    //标记状态 => 1未完成  2复核通过  3已完成
    async markStatus(item, status) {
      const { code, data } = await changeSchedule({
        id: item.id,
        userType: item.userType,
        status: status,
      });
      if (code != 200) return;
      uni.$u.toast('操作成功');
      this.getInfiniteList(true);
    },
    //返回客服主页
    goBack() {
      uni.switchTab({
        url: '/pages/customer/customer',
      });
    },
    //待办列表
    async getInfiniteData(
      pageIndex,
      pageSize,
      diyName = 'workOrderVoList',
      diyType = 1
    ) {
      const { code, data } = await getScheduleList({
        pageNum: pageIndex,
        pageSize: pageSize,
        status: this.status,
      });
      if (code != 200) return;
      if (data.loading != 0) {
        this.typeList[0].name = `进行中 ${data.loading}`;
      }
      if (data.toBeCheck != 0) {
        this.typeList[1].name = `待复核 ${data.toBeCheck}`;
      }
      return diyType == 1 ? data[diyName] : data;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //Tab切换
    typeTab(item) {
      this.status = item.type;
      if (item.type != 4) {
        this.getInfiniteList(true);
      }
    },
    //人工客服详情
    goDetail(item) {
      this.$Router.push({
        name: 'schedule-detail',
        params: {
          id: item.id,
        },
      });
    },
  },
};
</script>

<style></style>
